<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding no_need_padding" style="margin-bottom: 11px">
      <a-tabs
        @change="
          (val) => {
            $router.push({ name: val })
          }
        "
        activeKey="ShareMoneySetting"
      >
        <a-tab-pane key="ShareDistributorVerify" tab="分销商审核"> </a-tab-pane>
        <a-tab-pane key="ShareDistributor" tab="分销商"> </a-tab-pane>
        <a-tab-pane key="ShareOrder" tab="分销订单"> </a-tab-pane>
        <a-tab-pane key="ShareCash" tab="分销提现"> </a-tab-pane>
        <a-tab-pane key="ShareBasicSetting" tab="基础设置"> </a-tab-pane>
        <a-tab-pane key="MemberCommission" tab="佣金设置"> </a-tab-pane>
        <a-tab-pane key="SharePoster" tab="推广海报"> </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card :loading="loading">
      <template v-if="level != 0">
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="middle">
            <a-col class="required" :span="4" style="text-align: right"> 分销佣金类型： </a-col>
            <a-col :span="16">
              <a-radio-group @change="changeRadio" v-model="money.price_type">
                <a-radio :value="0"> 百分比 </a-radio>
                <a-radio :value="1"> 固定金额 </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
        </template>
        <template v-if="level > 0">
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> 一级名称： </a-col>
            <a-input class="input-class" v-model="money.first_name" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 一级佣金： </a-col>
            <a-input class="input-class" :addonAfter="flag" type="number" v-model="money.first" />
          </a-row>
        </template>
        <template v-if="level > 1">
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> 二级名称： </a-col>
            <a-input class="input-class" v-model="money.second_name" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 二级佣金： </a-col>
            <a-input class="input-class" :addonAfter="flag" type="number" v-model="money.second" />
          </a-row>
        </template>
        <template v-if="level > 2">
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> 三级名称： </a-col>
            <a-input class="input-class" v-model="money.third_name" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 三级佣金： </a-col>
            <a-input class="input-class" :addonAfter="flag" type="number" v-model="money.third" />
          </a-row>
        </template>
        <a-row :gutter="[30, 30]" type="flex" align="middle">
          <a-col offset="5">
            <a-button type="primary" @click="onSave"> 保存 </a-button>
          </a-col>
        </a-row>
      </template>
      <a-alert v-else message="分销已经关闭" banner />
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { setMoneySetting, getShareSetting } from '@/api/share'

export default {
  name: 'ShareMoneySetting',
  components: {},
  data() {
    return {
      loading: false,
      flag: '%',
      money: {
        first: 0.0,
        first_name: '一级',
        second: 0.0,
        second_name: '二级',
        third: 0.0,
        third_name: '三级',
        price_type: 0,
      },
      level: 3,
    }
  },
  created() {
    this.getData()
    this.getShareData()
  },
  methods: {
    changeRadio(e) {
      if (e.target.value === 1) {
        this.flag = '元'
      } else {
        this.flag = '%'
      }
    },
    onSave() {
      const hide = this.$message.loading('提交中', 0)
      setMoneySetting(this.money).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: function () {
      var that = this
      var params = { name: 'share_money_setting' }

      getShareSetting(params).then((res) => {
        const data = res.data
        var p = {
          first: data.level_one.value,
          first_name: data.level_one.text,
          second: data.level_two.value,
          second_name: data.level_two.text,
          price_type: data.price_type,
          third: data.level_three.value,
          third_name: data.level_three.text,
        }
        Object.assign(that.money, p)
        this.$nextTick(() => {
          if (this.money.price_type === 1) {
            this.flag = '元'
          } else {
            this.flag = '%'
          }
        })
      })
    },
    getShareData: function () {
      var params = { name: 'share_basic_setting' }
      this.loading = true
      getShareSetting(params)
        .then((res) => {
          const data = res.data
          this.level = data.level.value
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
.input-class {
  width: 300px;
  margin: 10px 8px 25px 0;
}
</style>
